body{
    width: 10.8rem;
    overflow-x: hidden;
}
/* 轮播图 */
header{
    .container{
        width: 10.8rem;
        height: 11.87rem;
        overflow: hidden;
        position: relative;
        .nav{
            width: 10.8rem;
            height: 1.44rem;
            position: fixed;
            top: 0rem;
            background-color: #c7c7c7;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            opacity: 0.8;
            span{
                font-size: .37rem;
                margin-right: .43rem;
                height: .6rem;
            }
            >span:nth-of-type(1){
                font-weight: bolder;
                color: #fa603d;
                display: flex;
                flex-direction: column;
                align-items: center;
                &::after{
                    content: "";
                    display: block;
                    width: .37rem;
                    height: .06rem;
                    background-color: #ff5934;
                }
            }
            a{
                position: absolute;
                display: flex;
                span{
                    font-size: .72rem;
                }
            }
            >a:nth-of-type(1){
                top: .29rem;
                left: .43rem;
            }
            >a:nth-of-type(2){
                top: .29rem;
                right: .43rem;
            }
        }
        .pic{
            width: 32.4rem;
            position: absolute;
            left: 0rem;
            display: flex;
            animation: slide 6s 1s steps(3,end) infinite;
            img{
                width: 10.8rem;
                height: 11.87rem;
            }
        }
    }
}
@keyframes slide{
    from{
        left: 0rem;
    }
    to{
        left: -32.4rem;
    }
}
/* 价格 */
.price{
    width: 10.8rem;
    height: 2.39rem;
    box-sizing: border-box;
    padding: 0rem .46rem;
    >h1{
        font-size: .72rem;
        color: #ff6700;
        span{
            font-size: .35rem;
            text-decoration: line-through;
            color: #777780;
        }
    }
    >.price-more{
        width: 9.82rem;
        height: 1.44rem;
        background-color: #fff2ef;
        display: flex;
        align-items: center;
        padding-left: .17rem;
        .price-more-left{
            display: flex;
            flex-direction: column;
            span{
                font-size: .35rem;
                color: #ff5e3b;
                border: .03rem solid #ff8265;
            }
            >span:nth-child(1){
                width: 2.45rem;
                height: .37rem;
            }
            >span:nth-child(2){
                width: 5.99rem;
                height: .37rem;
                margin-top: .06rem;
            }
        }
        .price-more-right{
            font-size: .35rem;
            color: #ff5e3b;
            margin-left: 2.59rem;
        }
    }
}
/* name */
.name{
    height: .69rem;
    line-height: .69rem;
    font-size: .46rem;
    font-weight: bolder;
    padding-left: .46rem;
    box-sizing: border-box;
    margin-top: .29rem;
}
.explain{
    width: 9.82rem;
    height: 2.94rem;
    margin: auto;
    font-size: .35rem;
    margin-top: .14rem;
    h3{
        margin-top: .14rem;
    }
}
/* 福利 */
.welfare{
    font-size: .35rem;
    padding-left: .46rem;
    span{
        background-color: #f0f0f0;
        display: inline-block;
        width: 2.76rem;
        height: .58rem;
        border-radius: .29rem;
        text-align: center;
        line-height: .58rem;
        color: #4a484a;
    }
}
/* 配置 */
.configure{
    width: 10.8rem;
    height: 2.48rem;
    overflow-x: scroll;
    &::-webkit-scrollbar{
        display: none;
    }
    border-top: .03rem solid #f7f7f7;
    margin-top: .29rem;
    .configure-item{
        display: flex;
        width: 22.61rem;
        .configure-pic{
            width: 2.51rem;
            height: 2.48rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: .43rem;
                height: .43rem;
                margin-top: .43rem;
            }
            span{
                font-size: .35rem;
            }
        }
    }
}
/* 排行榜 */
.ranking-list{
    width: 10.8rem;
    height: 1.3rem;
    background-color: #fff3eb;
    box-sizing: border-box;
    padding: .42rem .3rem .42rem .45rem;
    display: flex;
    align-items: center;
    /* .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    } */
    >span:nth-of-type(1){
        font-size: .4rem;
        font-weight: bolder;
    }
    h4{
        font-size: .35rem;
        margin-left: .58rem;
    }
    >span:nth-of-type(2){
        font-size: .35rem;
        font-weight: bolder;
        margin-left: 4rem;
        color: #c7c7c7;
    }
}
/* bought */
.bought{
    position: relative;
    .choice{
        width: 10.8rem;
        height: 1.32rem;
        box-sizing: border-box;
        padding-left: .46rem;
        display: flex;
        font-size: .35rem;
        font-weight: bolder;
        align-items: center;
        justify-content: center;
        pre{
            margin-left: .58rem;
            a{
                display: inline-block;
                width: 8.96rem;
                height: 1.32rem;
                line-height: 1.32rem;
                border-bottom: .03rem solid #f5f5f5;
                span{
                    margin-left: .86rem;
                    color: #c7c7c7;
                }
            }
        }
    }
    .carry{
        font-size: .35rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10.8rem;
        height: 1.81rem;
        background-color: #ffffff;
        box-sizing: border-box;
        padding-left: .4rem;
        >span{
            font-weight: bolder;
        }
        a{
            width: 8.96rem;
            height: 1.81rem;
            display: flex;
            line-height: 1.81rem;
            margin-left: .58rem;
            position: relative;
            .position{
                >span{
                    font-size: .35rem;
                    font-weight: bolder;
                    span{
                        color: #ff6b4a;
                    }
                }
                h4{
                    font-size: .35rem;
                    color: #848484;
                    position: absolute;
                    top: .52rem;
                    left: .43rem;
                }
            }
            >span{
                margin-left: 4.55rem;
                color: #c8c8c8;
            }
        }
    }
    .manage{
        height: 1.07rem;
        width: 10.8rem;
        background-color: #fcfcfc;
        box-sizing: border-box;
        padding-left: .46rem;
        display: flex;
        align-items: center;
        >div{
            display: flex;
            align-items: center;
            margin-right: .43rem;
            img{
                width: .35rem;
                height: .35rem;
            }
            span{
                font-size: .35rem;
                color: #8c8c8c;
            }
        }
        >span{
            font-size: .35rem;
            color: #c6c6c6;
            margin-left: 2.02rem;
        }
    }
    &::after{
        content: "";
        display: block;
        position: absolute;
        width: 10.8rem;
        height: .29rem;
        background-color: #f6f6f6;
    }
}
/* 推荐套餐 */
.set-meal{
    width: 10.8rem;
    height: 8.35rem;
    box-sizing: border-box;
    padding-left: .46rem;
    h1{
        font-size: .46rem;
        height: 1.44rem;
        line-height: 1.44rem;
        margin-top: .29rem;
    }
    .product{
        width: 100%;
        height: 4.38rem;
        display: flex;
        .product-item-small{
            width: 2.85rem;
            height: 4.38rem;
            box-sizing: border-box;
            padding: 0rem .17rem;
            display: flex;
            flex-direction: column;
            border: .02rem solid #ebebeb;
            border-radius: .14rem;
            font-size: .35rem;
            position: relative;
            img{
                width: 2.45rem;
                height: 2.45rem;
            }
            h2{
                margin: .23rem 0rem;
            }
        }
        .sign{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.61rem;
            height: 4.38rem;
            >img{
                width: .4rem;
                height: .4rem;
            }
        }
        .product-container{
            height: 100%;
            width: 5.88rem;
            position: relative;
            overflow-x: scroll;
            &::-webkit-scrollbar{
                display: none;
            }
            .pic{
                display: flex;
                .product-item-small{
                    width: 2.85rem;
                    height: 4.38rem;
                    box-sizing: border-box;
                    padding: 0rem .17rem;
                    display: flex;
                    flex-direction: column;
                    border: .02rem solid #ebebeb;
                    border-radius: .14rem;
                    font-size: .35rem;
                    position: relative;
                    margin-right: .29rem;
                    img:nth-of-type(1){
                        width: 2.45rem;
                        height: 2.45rem;
                    }
                    h2{
                        margin: .23rem 0rem;
                    }
                    h4{
                        text-decoration: line-through;
                        color: #cccccc;
                    }
                    img:nth-of-type(2){
                        width: .72rem;
                        height: .72rem;
                        position: absolute;
                        bottom: 0rem;
                        right: 0rem;
                    }
                }
            }
        }
    }
    .all-price{
        width: 10.8rem;
        height: .58rem;
        box-sizing: border-box;
        padding-left: .46rem;
        display: flex;
        justify-content: center;
        margin: .4rem 0rem .49rem;
        >span:nth-child(1){
            font-size: .4rem;
            font-weight: bolder;
        }
        >span:nth-child(2){
            font-size: .46rem;
            font-weight: bolder;
            color: #ff5934;
        }
        >span:nth-child(3){
            font-size: .35rem;
            color: #a3a3a3;
            text-decoration: line-through;
            display: flex;
            align-items: center;
        }
        >span:nth-child(4){
            font-size: .35rem;
            color: #a3a3a3;
            display: flex;
            align-items: center;
        }
    }
    button{
        border: none;
        width: 9.88rem;
        height: .98rem;
        border-radius: .49rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: .35rem;
        /* margin: auto; */
        background-image: linear-gradient(to right,#ff7d00, #ff5934);
    }
}
/* 回顶部 */
.return-top{
    position: sticky;
    top: 15.84rem;
    left: 9.79rem;
    z-index: 100;
    img{
        width: 1.04rem;
        height: 1.04rem;
    }
}
/* 用户评价 */
.assess{
    width: 10.8rem;
    height: 9.79rem;
    margin-top: -1.04rem;
    &::after{
        content: "";
        display: block;
        width: 10.8rem;
        height: .29rem;
        background-color: #f6f6f6;
        margin-top: .58rem;
    }
    .title{
        width: 9.85rem;
        height: 1.07rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        >span:nth-child(1){
            font-size: .4rem;
            font-weight: bolder;
        }
        >span:nth-child(2){
            font-size: .35rem;
            color: #8b8b8b;
        }
    }
    .classify{
        width: 9.85rem;
        height: 1.81rem;
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        span{
            width: 1.84rem;
            height: .6rem;
            border-radius: .29rem;
            background-color: #ffeeea;
            font-size: .35rem;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: .29rem;
            margin-top: .29rem;
        }
    }
    .content{
        width: 10.8rem;
        box-sizing: border-box;
        padding-left: .46rem;
        overflow-x: scroll;
        &::-webkit-scrollbar{
            display: none;
        }
        margin-top: .29rem;
        display: flex;
        .content-item{
            width: 8.18rem;
            height: 5.7rem;
            border-radius: .23rem;
            border: .03rem solid #f2f2f2;
            box-sizing: border-box;
            padding-left: .46rem;
            margin-top: .29rem;
            margin-right: .29rem;
            .name{
                display: flex;
                padding: 0rem;
                height: .95rem;
                .name-pic{
                    width: .9rem;
                    height: .9rem;
                    border-radius: 50%;
                    overflow: hidden;
                    img{
                        width: .95rem;
                        height: .95rem;
                    }
                }
                .date{
                    font-size: .35rem;
                    display: flex;
                    flex-direction: column;
                    margin-left: .29rem;
                    h1,h2{
                        height: .37rem;
                    }
                    h2{
                        color: #aeaeae;
                        display: flex;
                        margin-top: .06rem;
                    }
                }
            }
            .word{
                font-size: .35rem;
                margin-top: .58rem;
                color: #aeaeae
            }
            .content-item-pic{
                display: flex;
                margin-top: .58rem;
                >div{
                    width: 2.28rem;
                    height: 2.28rem;
                    border-radius: .14rem;
                    overflow: hidden;
                    margin-right: .23rem;
                    img{
                        width: 2.28rem;
                        height: 2.28rem;
                    }
                }
            }
        }
    }
}
/* 米粉点评团 */
.comment{
    width: 10.8rem;
    height: 8.21rem;
    padding-left: .23rem;
    box-sizing: border-box;
    margin-top: .29rem;
    position: relative;
    &::after{
        content: "";
        display: block;
        width: 10.8rem;
        height: .29rem;
        background-color: #f6f6f6;
        margin-top: .58rem;
        margin-left: -0.23rem;
    }
    .title{
        height: 1.47rem;
        width: 10.31rem;
        box-sizing: border-box;
        padding: 0rem .23rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bolder;
        span{
            font-size: .46rem;
        }
    }
    .content{
        width: 10.31rem;
        height: 6.13rem;
        
        overflow-x: scroll;
        &::-webkit-scrollbar{
            display: none;
        }
        .container{
            display: flex;
            width: 23.04rem;
            .content-item{
                width: 4.06rem;
                height: 6.02rem;
                border-radius: .14rem;
                border: .03rem solid #f7f7f7;
                overflow: hidden;
                margin-right: .23rem;
                >img{
                    width: 4.06rem;
                    height: 4.06rem;
                }
                h3{
                    font-size: .35rem;
                    padding-left: .23rem;
                }
                >.name{
                    display: flex;
                    padding-left: .23rem;
                    align-items: center;               
                    .pic{
                        width: .52rem;
                        height: .52rem;
                        border-radius: 50%;
                        overflow: hidden;
                        display: flex;
                        img{
                            width: .52rem;
                        height: .52rem;
                        }
                    }
                    >span{
                        font-size: .35rem;
                        color: #c1c1c1;
                    }
                    >span:nth-of-type(1){
                        margin-left: .23rem;
                    }
                    >span:nth-of-type(2){
                        margin-left: .86rem;
                    }
                }
            }
        }
        
    }
}
/* 下面轮播图 */
.slideshow-bottom{
    width: 10.8rem;
    height: 3.02rem;
    background-color: #f6f6f6;
    margin-top: .28rem;
    >.container{
        width: 9.85rem;
        height: 2.71rem;
        border-radius: .23rem;
        overflow: hidden;
        margin: auto;
        position: relative;
        .pic{
            position: absolute;
            left: 0rem;
            width: 29.55rem;
            display: flex;
            animation: slide-bottom 6s 1s steps(3,end) infinite;
            img{
                width: 9.85rem;
                height: 2.71rem; 
            }
        }
    }
}
@keyframes slide-bottom{
    from{
        left: 0rem;
    }
    to{
        left: -29.55rem;
    }
}
/* 商品推荐-爆款推荐 */
.hot{
    width: 10.8rem;
    height: 12.9rem;
    &::after{
        content: "";
        display: block;
        width: 10.8rem;
        height: .29rem;
        background-color: #f6f6f6;
        margin-top: .58rem;
        margin-left: -0.23rem;
    }
    .title{
        width: 9.85rem;
        height: 1.18rem;
        margin: auto;
        display: flex;
        justify-content: space-evenly;
        font-size: .35rem;
        font-weight: bolder;
        align-items: center;
        >a:nth-child(1){
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #ff6700;
            &::after{
                content: "";
                display: block;
                width: .46rem;
                height: .06rem;
                background-color: #ff6700;
            }
            
        }
    }
    .product{
        width: 9.85rem;
        height: 10.92rem;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .product-item{
            width: 3.11rem;
            height: 4.92rem;
            >div{
                width: 3.11rem;
                height: 3.11rem;
                border-radius: .14rem;
                overflow: hidden;
                img{
                    width: 3.11rem;
                    height: 3.11rem;
                    background-color: #f7f7f7;
                }
            }
            p{
                font-size: .35rem;
                font-weight: 700;
                margin-top: .23rem;
            }
            h4{
                font-size: .35rem;
                color: #ff6b07;
                font-weight: bolder;
                >span:nth-of-type(1){
                    font-weight: normal;
                }
                >span:nth-of-type(2){
                    font-weight: normal;
                    color: #aaaaaa;
                    text-decoration: line-through;
                }
            
            }
        }
    }
}
/* 大图展示 */
.big-pic{
    width: 10.8rem;
    .title{
        width: 10.8rem;
        height: 1.01rem;
        font-size: .35rem;
        font-weight: bolder;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        >span{
            color: #ff7759;
        }
    }
    .pic{
        display: flex;
        flex-direction: column;
        img{
            width: 10.8rem;
        }
    }
}
/* 商品推荐 */
.recommend{
    .title{
        width: 10.8rem;
        height: 1.18rem;
        box-sizing: border-box;
        padding-left: .46rem;
        font-size: .43rem;
        display: flex;
        align-items: center;
    }
    .recommend-item{
        .item{
            display: flex;
            .item-small{
                img{
                    width: 5.33rem;
                    height: 5.33rem;
                }
                h2{
                    font-size: .4rem;
                    padding-left: .37rem;
                    box-sizing: border-box;
                }
                h3{
                    font-size: .37rem;
                    color: #ff9a81;
                    padding-left: .46rem;
                    box-sizing: border-box;
                }
            }
        }
    }
}
/* 底部 */
footer{
    width: 10.8rem;
    height: 1.44rem;
    background-color: #ffffff;
    position: fixed;
    bottom: 0rem;
    z-index: 100;
    display: flex;
    align-items: center;
    a{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: .37rem;
        img{
            width: .55rem;
            height: .55rem;
        }
        span{
            font-size: .35rem;
            color: #959595;
        }
    }
    >a:nth-of-type(2){
        .icon-kefu{
            transform: scale(1.45);
        }
    }
    button{
        width: 3.05rem;
        height: 1.07rem;
        border: none;
        color: white;
        &:nth-of-type(1){
            border-top-left-radius: .5rem;
            border-bottom-left-radius: .5rem;
            background-image: linear-gradient(to right,#fdca00,#fd9b00);
            margin-left: .37rem;
        }
        &:nth-of-type(2){
            border-top-right-radius: .5rem;
            border-bottom-right-radius: .5rem;
            background-image: linear-gradient(to right,#ff7210,#fe4000);
        }
    }
}